<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>orderDisplay</title>
    <link rel="stylesheet" type="text/css" href="css/login.css">
</head>
<body>
<div id="app">
    <div style="margin: 10px auto">
        <table style="margin: 10px auto">
            <thead>
            <tr>
                <td>订单ID</td>
                <td>用户ID</td>
                <td>处理时间</td>
                <td>操作员ID</td>
                <td>总价</td>
                <td>折扣后价格</td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(o,index) in orders">
                <td>{{o.orderId}}</td>
                <td>{{o.customerId}}</td>
                <td>{{o.dealTime}}</td>
                <td>{{o.receiver}}</td>
                <td>{{o.totalPrice}}</td>
                <td>{{o.discountTotalPrice}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script src="js/Vue.js"></script>
<script>
  const app = Vue.createApp({
      data(){
          return {
              orders:[]
          }
      },
      created(){
          const xhr = new XMLHttpRequest();
          xhr.open("GET", "http://localhost:8080/GetUserOrdersServlet");
          xhr.send();
          xhr.onreadystatechange = function () {
              if (xhr.readyState === 4) {
                  if (xhr.status >= 200 && xhr.status < 300) {
                      this.orders = JSON.parse(xhr.response);
                  }
              }
          }
      }
  }).mount("#app");
</script>
</body>
</html>